<script lang="ts" setup>
import { ref, watch } from 'vue'
import IconFont from '@/assets/icons/iconFont'
import type { Theme } from '@/store/modules/theme'
import SettingBtn from './components/SettingBtn.vue'
import AssignSelect from './components/AssignSelect.vue'
import { useThemeStore } from '@/store'
import { useUserStore } from '@/stores/user.store'
import { useTodoListStore } from '@/stores/list.store'
import { SettingBtnConfig, repeatConfig } from './constants/settingBtnConfig'

import { type ICreateListDto, PageId } from '@/stores/interfaces/list.interface'

const iconType = ref(true)
/** @desc 输入框聚失焦改变icon的类型 */
const changeIconType = () => (iconType.value = !iconType.value)
const props = defineProps<{ pageId: number }>()
const userStore = useUserStore()
const listForm = ref<ICreateListDto>({
  title: '',
  type: props.pageId,
  worker: userStore.user.username!,
  distribution: userStore.user.uid!
})
watch([props, userStore.user], initListForm)
function initListForm() {
  listForm.value = {
    title: '',
    type: props.pageId,
    worker: userStore.user.username!,
    distribution: userStore.user.uid!
  }
}

enum ListTime {
  ddl,
  remind
}
/**
 * @param value - 0: ddl, 1: remind
 * @param index - 选项值
 */
const addListDetail = (value: number, index: number) => {
  if (index === ListTime.ddl) {
    listForm.value.endTime = value
  } else {
    // newList.value.remind = value
  }
}
function handleAssign({ user: worker, uid: distribution }: { user: string; uid: string }) {
  listForm.value.worker = worker
  listForm.value.distribution = distribution
}

const { createList } = useTodoListStore()
/** @desc 添加列表并初始化 */
const handleCreateList = () => {
  if (listForm.value.title === '') return
  createList(listForm.value)
  // oldUserStore.updataCreate()
  initListForm()
}

/**
 * @desc 切换任务分组
 * @param value 分组pageId
 */
const toggleType = (value: unknown) => {
  listForm.value.type = +(value as string)
}

/** @desc 分组安钮列表 */
const themeStore = useThemeStore()
const category = ref<Theme[]>(themeStore.getCustomTheme())
themeStore.$subscribe(() => {
  category.value = themeStore.getCustomTheme()
})
</script>

<template>
  <div class="mx-8 mb-16">
    <a-input
      v-model="listForm.title"
      class="h-12 opacity-80"
      size="large"
      :placeholder="$t('list.addbar.placeholder')"
      allow-clear
      @focus="changeIconType"
      @blur="changeIconType"
      @press-enter="handleCreateList"
    >
      <template #prefix>
        <IconFont :type="`icon-${iconType ? 'zengjia' : 'quan'}`" :size="20" />
      </template>
      <template #suffix>
        <!-- 任务选项菜单 -->
        <div v-show="listForm.title">
          <a-dropdown trigger="click" :popup-max-height="false" @select="toggleType">
            <a-tooltip background-color="#ebeef5" mini>
              <span class="setting-btn tips">
                <IconTag class="relative top-0.5 stroke-2 dark:fill-light-700" :size="23" />
              </span>
              <template #content>
                <p class="tips">{{ $t('list.addbar.menu.tip') }}</p>
              </template>
            </a-tooltip>
            <template #content>
              <a-doption value="8">
                <template #icon>
                  <IconFont type="icon-zhuye" :size="20" />
                </template>
                <span>{{ $t('layout.menu.task') }}</span>
              </a-doption>
              <a-doption v-for="item in category" :key="item.uuid" :value="item.uuid">
                <template #icon>
                  <IconUnorderedList />
                </template>
                <span>{{ item.title }}</span>
              </a-doption>
            </template>
          </a-dropdown>
          <a-popover
            v-if="pageId == PageId.assign"
            :title="$t('list.addbar.menu.at.title')"
            trigger="click"
          >
            <a-tooltip background-color="#ebeef5" mini>
              <span class="setting-btn tips dark:text-light-50">
                <IconFont type="icon-at" :size="20" />
              </span>
              <template #content>
                <p class="tips">{{ $t('list.addbar.menu.at') }}</p>
              </template>
            </a-tooltip>
            <template #content>
              <AssignSelect :worker="listForm.worker" @assign="handleAssign" />
            </template>
          </a-popover>
          <SettingBtn
            v-for="(item, index) of SettingBtnConfig"
            :key="index"
            :button-icon="item.buttonIcon"
            :common-options="item.commonOptions"
            :tip="item.tip"
            :date-picker="item.datePicker"
            @select="addListDetail"
          />
          <a-dropdown trigger="click" position="tr" :popup-max-height="false">
            <a-tooltip background-color="#fff" position="tr" mini>
              <span class="setting-btn">
                <IconFont type="icon-zhouqifuwushiduan" :size="20" />
              </span>
              <template #content>
                <p class="tips">{{ $t('list.addbar.repeat.tip1') }}</p>
                <br />
                <p class="tips">{{ $t('list.addbar.repeat.tip2') }}</p>
              </template>
            </a-tooltip>
            <template #content>
              <a-doption
                v-for="item of repeatConfig"
                :key="item.value"
                class="min-w-48"
                :value="item.value"
              >
                {{ $t(item.title) }}
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </template>
    </a-input>
  </div>
</template>

<style scoped>
.setting-btn {
  @apply rounded-md my-auto h-11 px-2 leading-11 inline-block;
  @apply hover:bg-light-200 dark:hover:bg-gray-700;
}

.option {
  @apply flex min-w-48 justify-between last:text-gray-600;
}

:deep(.arco-input-focus) {
  border-color: transparent;
}
</style>
